<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-用户中心</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" href="../static/css/reset.css">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css">
    <style type="text/css">
        .empty-orders {
            text-align: center;
            padding: 60px 0;
            color: #666;
        }

        .empty-orders .empty-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .empty-orders p {
            font-size: 18px;
            margin-bottom: 30px;
        }

        .btn-primary {
            display: inline-block;
            padding: 10px 25px;
            background-color: #ff6700;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .btn-primary:hover {
            background-color: #e05c04;
            color: white;
        }

    </style>
</head>
<body>
<div class="header_con" th:include="inner::header"></div>
<div class="search_bar clearfix">
    <a href="index.html" class="logo fl" th:href="@{/index}"><img src="images/logo.png"></a>
    <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
    <div class="search_con fr">
        <input type="text" class="input_text fl" name="" placeholder="搜索商品">
        <input type="button" class="input_btn fr" name="" value="搜索">
    </div>
</div>

<div class="main_con clearfix">
    <div class="left_menu_con clearfix">
        <h3>用户中心</h3>
        <ul>
            <li><a href="user-info.html" th:href="@{/profile}">· 个人信息</a></li>
            <li><a href="user-order.html" th:href="@{/order}" class="active">· 全部订单</a></li>
            <li><a href="user-addr.html" th:href="@{/addr}">· 收货地址</a></li>
        </ul>
    </div>
    <div class="right_content clearfix" >
        <h3 class="common_title2">全部订单</h3>
        <th:block th:if="${page.list.isEmpty()}">
            <div class="empty-orders">
                <div class="empty-icon">📦</div>
                <p>暂无订单</p>
                <a href="/index" class="btn btn-primary">去逛逛</a>
            </div>
        </th:block>
        <th:block th:each="order : ${page.list}">
            <ul class="order_list_th w978 clearfix">
                <li class="col01" th:text="${order.createTime}">2016-8-21 17:36:24</li>
                <li class="col02">订单号：<span th:text="${order.orderNo}">567894</span></li>
                <li class="col02 stress" th:text="${order.orderStatusDesc}">未支付</li>
            </ul>

            <table class="order_list_table w980">
                <thead>
                <tr>
                    <th>
                        <ul class="order_title">
                            <li>商品图片</li>
                            <li>商品名称</li>
                            <li>商品规格</li>
                            <li>购买数量</li>
                            <li>小计</li>
                        </ul>
                    </th>
                    <th>合计</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td width="55%">
                        <th:block th:each="orderItem : ${order.orderItems}">
                        <ul class="order_goods_list clearfix">
                            <li class="col01"><img src="images/goods02.jpg" th:src="${orderItem.product.imageUrl}"></li>
                            <li class="col02">
                                <span th:text="${orderItem.product.name}">嘎啦苹果嘎啦苹果</span>
                                <em th:text="${orderItem.product.price + '元/' + orderItem.product.unit}">11.80元/500g</em>
                            </li>
                            <li class="col03" th:text="${orderItem.quantity}">1</li>
                            <li class="col04" th:text="${orderItem.quantity * orderItem.product.price + '元'}">11.80元</li>
                        </ul>
                        </th:block>
                    </td>
                    <td width="18%" th:text="${order.totalAmount}">33.60元</td>
                    <td width="27%">
                        <a href="#" class="oper_btn"
                           th:if="${order.orderStatus == 0}"
                           th:onclick="'orderOper('+${order.id}+', 0)'">去付款</a>
                        <a href="#" class="oper_btn"
                           th:if="${order.orderStatus==2 || order.orderStatus==3}"
                           th:onclick="'orderOper('+${order.id}+', 1)'">查看物流</a>
                        <a href="#" class="oper_btn"
                           th:if="${order.orderStatus == 0 || order.orderStatus == 1}"
                        th:onclick="'orderOper('+${order.id}+', 2)'">取消订单</a>
                        <a href="#" class="oper_btn"
                           th:if="${order.orderStatus == 3 || order.orderStatus == 4 || order.orderStatus == 5}"
                        th:onclick="'orderOper('+${order.id}+', 3)'">删除订单</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </th:block>

        <div class="pagenation">
            <a href="#" th:if="${page.isFirstPage}">«上页</a>
            <a href="#" th:href="@{order(pIndex=${page.prePage})}" th:if="${!page.isFirstPage}">«上页</a>
            <a href="#"
               th:each="i: ${page.navigatepageNums}"
               th:href="@{order(pIndex=${i})}"
               th:class="${page.pageNum == i?'active':''}"
               th:text="${i}">1</a>
            <a href="#" th:href="@{order(pIndex=${page.nextPage})}" th:if="${!page.isLastPage}">下页»</a>
            <a href="#" th:if="${page.isLastPage}">下页»</a>
        </div>
    </div>
</div>

<div th:include="inner::footer" class="footer"></div>
<script type="text/javascript" src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    function orderOper(orderId, type) {
        if(type == 0){
            $.ajax({
                url: 'pay/'+orderId,
                type: 'get',
                success: function(result){
                    if(result.code == 200){
                        // 创建一个隐藏的div来存放支付表单
                        $('body').append('<div id="pay_form" style="display:none;">' + result.data + '</div>');
                        // 自动提交支付表单
                        document.forms[0].submit();
                    }else{
                        alert(result.message)
                    }
                }
            })
        }else if(type == 1){
            console.log('查看物流')
        } else if(type == 2){
            if(confirm('您确定要取消该订单吗？')){
                window.location.href = 'order/cancel/'+orderId;
            }
        }else if(type == 3){
            if(confirm('您确定要删除该订单吗？')){
                window.location.href = 'order/delete/'+orderId;
            }
        }
    }
</script>
</body>
</html>